<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1 align="left">一级标题</h1>
    <h2 align="center">二级标题</h2>
    <h3 align="right">三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

    <!--标签之段落，换行，水平线
    p:段落标签
    换行<br>
    水平线<hr>:
    有属性：color，width，size，align
    -->
    <p>如果你希望不产生一个<br>新段落的情况下进行换行</p>
    <p>我是一个段落标签</p>
    <hr color="red" width="300px" size="3px" align="center">
    <p>我是一个段落标签</p>
    <!-- 标签之图片
    <img>标签定义HTML页面的图像->单标签，不需要闭合操作
    属性：
    src：路径
    alt:规定图像的替代文本
    width：图像宽度
    height:图像高度
    title:鼠标悬停在图片上给予提示

    图片路径详解：
    绝对路径，相对路径，网络路径
    -->
    <!-- 网络路径： -->
    <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.TjebbUwPdSZVCV2sjmoP4AHaLH?w=202&h=303&c=7&r=0&o=5&dpr=1.3&pid=1.7"
        alt="性感美女" width="300px" title="性感美女">
    <!-- 绝对路径：电脑的盘符存储与访问的具体路径 -->
    <img src="D:\图片\截图\234.png" alt="" width="300px" height="400px">
    <!-- 相对路径的同级关系 -->
    <img src="123.png" alt="" width="300px">
    <!-- 相对路径的子级关系 -->
    <img src="image/123.png" alt="" width="300px">
    <!-- 相对路径的父级关系 -->
    <img src="../123.png" alt="" width="200px"><br>

    <!-- 标签之超文本链接 -->
    <a href="https://www.baidu.com/">百度链接</a>

    <!-- 标签之文本
     常用文本标签：
     <em>            定义着重文字
     <b>             定义粗体文字
     <i>             定义斜体字
     <strong>        定义加重语气
     <del>           定义删除字
     <span>          元素没有特定的含义
-->
    <p>p你好</p>
    <em>em你好</em>
    <i>i你好</i>
    <strong>strong你好</strong>
    <del>del你好</del>
    <span>span你好</span>
    <b>b你好</b>

<!-- 列表标签之有序列表：
     有序标签始于<ol>,终于<li>
     属性:type:1,a,A,i,I
     可实现嵌套
-->
    <ol type="1">
        <li>吃早餐</li>
        <li>学习</li>
        <li>吃午饭</li>
    </ol>
    <ol type="a">
        <li>吃早餐</li>
        <li>学习</li>
        <li>吃午饭</li>
    </ol>
    <ol type="A">
        <li>吃早餐</li>
        <li>学习</li>
        <li>吃午饭</li>
    </ol>
    <ol type="i">
        <li>吃早餐</li>
        <li>学习</li>
        <li>吃午饭</li>
    </ol>
    <ol type="I">
        <li>吃早餐</li>
        <li>学习</li>
        <li>吃午饭</li>
    </ol>
    <ol type="I">
        <li>
            图书
            <ol>
                <li>红楼梦</li>
                <li>西游记</li>
                <li>水浒传</li>
            </ol>
        </li>
        <li>
            蔬菜
            <ol>
                <li>白菜</li>
                <li>辣椒</li>
                <li>香菜</li>
            </ol>
        </li>
    </ol>

<!-- 列表标签之无序列表，可实现嵌套
    项目的列表，此项目使用粗体圆点进行标记，始于<ul>，终于<li>
    属性：
        disc默认实心圆
        circle空心圆
        square小方块
        none不显示
    常见的使用场景：无序的列表效果，导航效果
    快捷键：ul>li*3
-->
   <ul type="circle">
       <li>苹果</li>
       <li>橘子</li>
       <li>香蕉</li>
   </ul>
   <ul type="square">
       <li>苹果</li>
       <li>橘子</li>
       <li>香蕉</li>
   </ul>
   <ul type="none">
       <li>苹果</li>
       <li>橘子</li>
       <li>香蕉</li>
   </ul>

   <!-- 标签之表格（行，列，单元格）特点：同行等高，同列等宽
    表格：<table>  行:<tr>  列:<td>
    快捷键：table>tr*2>td*3{单元格}
    属性：
        boder设置表格的边框
        width表格的宽度
        height表格的高度
-->
   <table border="1" width="400px" height="200px">
      <tr>
        <td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
      </tr>
      <tr>
        <td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
      </tr>
      <tr>
        <td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
      </tr>
   </table>   
   
<!-- 表格单元格合并 
    水平合并：colspan
    垂直合并：rowspan 
-->
   <p>合并·6和7:colspan</p>
   <p>合并·15和20:rowspan</p>
   <p>水平合并保留左删除右，垂直合并保留上删除下</p>
   <table border="1" width="600px" height="300px">
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        <td>单元格3</td>
        <td>单元格4</td>
        <td>单元格5</td>
    </tr>
    <tr>
        <td colspan="2">单元格6单元格7</td>
        <td>单元格8</td>
        <td>单元格9</td>
        <td>单元格10</td>
    </tr>
    <tr>
        <td>单元格11</td>
        <td>单元格12</td>
        <td>单元格13</td>
        <td>单元格14</td>
        <td rowspan="2">单元格1520</td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">单元格16</td>
        <td>单元格18</td>
        <td>单元格19</td>
    </tr>
    <tr>
        <td>单元格23</td>
        <td>单元格24</td>
        <td>单元格25</td>
    </tr>
   </table>
<!-- Form表单：
     表单在web网页中用来给用户填写信息。
     输入框按钮叫控件，表单叫容器
     属性：
        action:服务器地址
        name：表单名称
        method中get和post的区别：
           数据提交方式，get把提交的数据url可以看到，post看不到
           get一般用于提交少量数据，post用来提交大量数据
    表单元素：表单标签，表单域，表单按钮
-->
   <form action="url" method="get|post" name="myform"></form>
   <form>
       <input type="text">
       <input type="submit"> 
   </form>
<!-- 表单元素 -->
   <form>
       用户名：<input type="text"><br>
       密  码：<input type="password"><br>
       <input type="submit" value="登录">
   </form>

<!-- 块元素与行内元素（内联元素）
   块元素：会在页面中独占一行（自上而下垂直排列），可以设置width，height属性
   一般块级元素可以包含行内元素以及其他块级元素
   内联元素：不会在页面中独占一行，只占自身的大小，行内元素设置width，height属性无效
   一般内联元素包含内联元素不包含块级元素
   *块级元素：div，form,h1-h6,hr,p,table,ul等
   *内联元素（行内元素）：a,b,em,i,span,strong等
   *行内块级元素（特点：不换行，能够识别宽高）：button,img,input等
-->
   <h1>标题</h1>
   <p>段落</p>
   <ul>
    <li>列表1</li>
    <li>列表2</li>
   </ul>

   <a href="#">超链接</a>
   <span>内容</span>
   <em>注重语气</em>

   <img src="../123.png" alt="" width="300px">
   <img src="../123.png" alt="" width="400px">

<!-- HTML5新增标签
    之前：div容器元素
    新增标签出现：
-->
    <div>主导航
        <ul>
            <li>导航1</li>
            <li>导航2</li>
            <li>导航3</li>
        </ul>
    </div>
    <div>banner
        <img src="" alt="">
    </div>
    <div>广告区域
        <img src="" alt="">
        <p></p>
    </div>
   <!-- 传统布局 -->
   <div id="header">头部</div>
   <div id="nav">导航</div>
   <div id="article">
       <div id="section"></div>
   </div>
   <div id="silder">侧边栏</div>
   <div id="footer">底部</div>
   <!-- HTML5新增标签
     header：头部
     nav：导航
     article：代表一个独立的，完整的相关内容块
     section：定义文档中的节，比如章节，页眉，页脚
     aside：侧边栏
     footer：脚部
-->
   <header></header>
   <nav></nav>
   <article>
    <section></section>
   </article>
   <aside></aside>
   <footer></footer>

</body>

</html>